<template>
	<view class="box">
		<view class="center">
			<fui-section title="手机号登录/注册" size="50" marginTop="200" marginBottom="200" descrTop="20" descrSize="30" descr="欢迎来到千川引流" descrColor="var(--fui-color-subtitle)"></fui-section>
			<!-- 手机号 -->
			<fui-form ref="formRef">
				<fui-input backgroundColor="var(--fui-bg-color)" borderColor="var(--fui-color-label)" autocomplete="off" borderBottom placeholder="请输入手机号" v-model="formData.username">
					<template #left>
						<view class="fui-left__icon">
							<fui-icon name="mobile" :size="48" color="var(--fui-color-primary)"></fui-icon>
						</view>
					</template>
				</fui-input>
				<!-- 注册按钮 -->
				<view style="margin-top: 80rpx;">
					<fui-button text="获取验证码" radius="96rpx" bold background="linear-gradient(to right top, #ff6f49, #ff5a5e)" @click="toPage"></fui-button>
				</view>
			</fui-form>
		</view>
		<!-- 其它登录方式 -->
		<BaseLogin ref="agreementsRef"></BaseLogin>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	import { useSmsCode } from "@/hooks/useSmsCode"
	import { onReady } from '@dcloudio/uni-app'
	const agreementsRef = ref(null) // 隐私协议实例
	const { formData, reverseNumber, getMobileCode, innerText, submit } = useSmsCode(agreementsRef)

	const toPage = () => {
		uni.navigateTo({
			url: '/pages/entrance/smsCode/codeLogin'
		})
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100vh;
		background: var(--fui-bg-color) url(@/static/login/reg_bgg.png) no-repeat;
		background-size: cover;
		background-position: -50rpx -230rpx;
		overflow: hidden;
	}

	.center {
		box-sizing: border-box;
		padding: 60rpx;
	}
</style>